// 定义自定义指令：loading加载
import loadingUrl from "@/assets/loading.svg";
import styles from "@/directives/loading.module.less";

// 获取图片元素
function getLoadingImg(el) {
  return el.querySelector("img[data-role=loading]");
}

// 创建图片元素
function createLoadingImg() {
  const img = document.createElement("img");
  // 给 图标设置一个 自定义属性，用于识别
  img.dataset.role = "loading";
  img.src = loadingUrl;
  img.className = styles.loading;
  return img;
}

/**
 * 导出指令配置对象
 * @param {*} el ：使用该指令的真实DOM元素
 * @param {*} binding ：指令信息
 */
export default function (el, binding) {
  // 根据value的值 判断是否显示图标
  const value = binding.value;
  const currentImg = getLoadingImg(el);
  // 指令值为：true，显示动图
  if (value) {
    if (!currentImg) {
      const img = createLoadingImg();
      el.appendChild(img);
    }
  }
  else {
    if (currentImg) {
      currentImg.remove();
    }
  }
}